<template>
  <div class="app-container home">

    <el-form ref="form" :model="form" :rules="rules"  label-width="80px" >

      <div class="title">
        <div style="margin-left: 10px;">企业资质信息</div>  
      </div>

    
      <el-row style="margin-top: 20px; margin-left: 3%;">
        <el-col :span="12">
          <el-form-item label="单位名称" prop="companyName">
            <el-input v-model="form.nickName" placeholder="请输入用户昵称" style="width: 78%;" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="单位性质" prop="companyNature">
            <el-select v-model="NatureValue" placeholder="请选择" style="width: 78%;">
              <el-option
                v-for="item in NatureOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row style="margin-left: 3%;">
        <el-col :span="12">
          <el-form-item label="证件类型" prop="certificateType">
            <el-select v-model="NatureValue" placeholder="请选择" style="width: 78%;">
                <el-option
                  v-for="item in NatureOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="证件号码" prop="certificateNumber">
            <el-input v-model="form.number" placeholder="请输入证件号码" style="width: 78%;" />
            </el-form-item>
        </el-col>
      </el-row>


      <el-row style="margin-left: 3%;">
        <el-col :span="12">
          <el-form-item  label="行业类型" prop="industryType">        
              <el-select v-model="NatureValue" placeholder="请选择" style="width: 78%;">
                  <el-option
                    v-for="item in NatureOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select> 
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item  label="单位地址">
              <el-cascader
              size="large"
              :options="pcaTextArr"
              v-model="selectedOptions" style="width: 78%;">
              </el-cascader>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row style="margin-left: 3%;">
        <el-col :span="12">
          <el-form-item label="成立时间">
            <el-input v-model="form.number" placeholder="请输入成立时间" style="width: 78%;" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="详细地址" prop="detailedAddress">
            <el-input v-model="form.number" placeholder="请输入详细地址" style="width: 78%;" />
          </el-form-item>
        </el-col>
      </el-row>




      <el-row style="margin-left: 3%;">
        <el-col :span="12">
          <el-form-item label="有效期">
            <el-date-picker
              v-model="valueDate"
              type="date"
              placeholder="选择日期"
              style="width: 78%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="注册资本">
            <el-input v-model="form.number" placeholder="请输入注册资本" style="width: 78%;" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row style="margin-left: 2%;">
        <el-col :span="12">
          <el-form-item label="单位证件照片"  label-width="100px">
            <el-upload 
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>       
              <div class="el-upload__tip" slot="tip" style="margin-left: 15px;">只支持.jpg格式</div>
            </el-upload>
          </el-form-item>
        </el-col>

        
        <el-col :span="12" >
          <el-form-item label="单位简介" style="margin-left: 1%;">
              <el-input type="textarea" :rows="7" v-model="form.desc" style="width: 78%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <div class="title">
        <div style="margin-left: 10px;">法人信息</div>  
      </div>


      <el-row style="margin-top: 20px; margin-left: -1%;">
        <el-col :span="12">
          <el-form-item label="法定代表人姓名" prop="companyName" label-width="150px">
            <el-input v-model="form.nickName" placeholder="请输入用户昵称" style="width: 78%; margin-right: 10px;" />
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="法定代表人证件类型" prop="companyNature" label-width="150px" style=" margin-left: -4.5%;">

            <el-select v-model="NatureValue" placeholder="请选择" style="width: 78%;">
              <el-option
                v-for="item in NatureOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>



      <el-row style="margin-top: 20px; margin-left: -1%;">
          <el-col :span="12">
            <el-form-item label="法定代表人手机号" label-width="150px">
              <el-input v-model="form.nickName"  style="width: 78%; margin-right: 10px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="法定代表人证件号" prop="companyNature" label-width="150px" style=" margin-left: -4.5%;">
              <el-input v-model="form.nickName" placeholder="请输入证件号" style="width: 78%; margin-right: 10px;" />
            </el-form-item>
          </el-col>
      </el-row>


      <el-row style="margin-top: 20px; margin-left: -1%;">
          <el-col :span="12">
            <el-form-item label="法定代表人证件照片" label-width="150px">

              <div style="display: flex;">

                <el-upload 
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>       
                  <div class="el-upload__tip" slot="tip" style="margin-left: 15px;">只支持.jpg格式</div>
                </el-upload>

                <el-upload style="margin-left: 20px;"
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>       
                    <div class="el-upload__tip" slot="tip" style="margin-left: 15px;">只支持.jpg格式</div>
                  </el-upload>


              </div>
              
            </el-form-item>
          </el-col>
          
      </el-row>




      <div class="title">
          <div style="margin-left: 10px;">联系人信息</div>  
      </div>


      <el-row style="margin-top: 20px; margin-left: -1%;">
          <el-col :span="12">
            <el-form-item label="联系人姓名" prop="companyName" label-width="150px">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" style="width: 78%; margin-right: 10px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="联系人证件类型" prop="companyNature" label-width="150px" style=" margin-left: -4.5%;">

              <el-select v-model="NatureValue" placeholder="请选择" style="width: 78%;">
                <el-option
                  v-for="item in NatureOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>




      <el-row style="margin-top: 20px; margin-left: -1%;">
            <el-col :span="12">
              <el-form-item label="联系人手机号" label-width="150px">
                <el-input v-model="form.nickName"  style="width: 78%; margin-right: 10px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="联系人证件号" prop="companyNature" label-width="150px" style=" margin-left: -4.5%;">
                <el-input v-model="form.nickName" placeholder="请输入证件号" style="width: 78%; margin-right: 10px;" />
              </el-form-item>
            </el-col>
      </el-row>




      <el-row style="margin-top: 20px; margin-left: -1%;">
            <el-col :span="12">
              <el-form-item label="法定代表人证件照片" label-width="150px">

                <div style="display: flex;">
                  <el-upload 
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>       
                    <div class="el-upload__tip" slot="tip" style="margin-left: 15px;">只支持.jpg格式</div>
                  </el-upload>

                  <el-upload style="margin-left: 20px;"
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>       
                      <div class="el-upload__tip" slot="tip" style="margin-left: 15px;">只支持.jpg格式</div>
                    </el-upload>
                </div>     
              </el-form-item>
            </el-col>

            <el-col :span="12" >
                <el-form-item label="联系人邮箱" prop="companyNature" label-width="150px" style=" margin-left: -4.5%;">
                  <el-input v-model="form.nickName" placeholder="请输入邮箱" style="width: 78%; margin-right: 10px;" />
                </el-form-item>
            </el-col>  
      </el-row>



      <div style="margin-left: 42%; margin-top: 20px;">
        <el-radio v-model="radio" label="1">成为平台企业（需求方）</el-radio>
      </div>
      
      <div class="title" style="margin-top: 10px;">
            <div style="margin-left: 10px;">平台企业信息（需求方）</div>  
      </div>




      <el-row style="margin-top: 20px; margin-left: -1%;">
              <el-col :span="12">
                <el-form-item label="所需产品品类" label-width="150px">
                  <el-input v-model="form.nickName"  style="width: 78%; margin-right: 10px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="备注" prop="companyNature" label-width="150px" style=" margin-left: -4.5%;">
                  <el-input v-model="form.nickName" placeholder="请输入证件号" style="width: 78%; margin-right: 10px;" />
                </el-form-item>
              </el-col>
      </el-row>



      <div style="margin-left: 43%; margin-top: 80px;">
          <el-radio v-model="radio" label="2">
            成为供应商</el-radio>
        </div>
      
        <div class="title" style="margin-top: 10px;">
              <div style="margin-left: 10px;">供应商</div>  
        </div>




        <el-row style="margin-top: 20px; margin-left: -1%;">
                <el-col :span="12">
                  <el-form-item label="可生产产品类别" label-width="150px">
                    <el-input v-model="form.nickName"  style="width: 78%; margin-right: 10px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12" >
                  <el-form-item label="备注" prop="companyNature" label-width="150px" style=" margin-left: -4.5%;">
                    <el-input v-model="form.nickName" placeholder="请输入备注" style="width: 78%; margin-right: 10px;" />
                  </el-form-item>
                </el-col>
        </el-row>





        <div style="margin-left: 43%; margin-top: 30px;">
          <el-button>取消</el-button>
          <el-button type="primary" plain>提交</el-button>
        </div>
        





















          
              
            


    </el-form>
    



    
  </div>
</template>

<script>
import { pcaTextArr } from 'element-china-area-data'
export default {
  name: "Index",
  data() {
    return {

      pcaTextArr,
      selectedOptions: [],

      NatureOptions: [{
        value: '选项1',
        label: '国有控股'
      }, {
        value: '选项2',
        label: '民营控股'
      }, {
        value: '选项3',
        label: '外商控股'
      }, {
        value: '选项4',
        label: '事业单位'
      }, {
        value: '选项5',
        label: '民营非盈利'
      }],
      NatureValue: '',

      valueDate:'',

      imageUrl: '',

      radio: '',








      // 表单参数
      form: {},
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: "单位名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '单位名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],

        companyNature:[
           { required: true, message: "公司性质不能为空", trigger: "blur" },
        ],

        certificateType:[
           { required: true, message: "证书类型不能为空", trigger: "blur" },
        ],
        certificateNumber:[
           { required: true, message: "证书号码不能为空", trigger: "blur" },
        ],
        industryType: [
          { required: true, message: "行业类型不能为空", trigger: "blur" },
        ],

        detailedAddress: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],

        

        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],

        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],

        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      // 版本号
      version: "3.8.7"
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }


  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden; 
}

.title{

  height: 30px;
  display: flex;
	align-items: center;
  background-color: #f2f2f2;



}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px dashed #967b7b;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }













</style>

